<template>
  <div ref="chartContainerleft2" style="padding: 5px;width: 100%;height: 100%"></div>
</template>

<script lang="ts" setup>
import {reactive, ref, onMounted, defineProps, defineEmits, nextTick} from "vue";
import * as echarts from 'echarts';
const state = reactive({
})

const chartContainerleft2 = ref(null);
const createCharts = ()=>{
  const chartInstance = echarts.init(chartContainerleft2.value);
  const option = {
    title: {
      text: ''
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      //formatter: '{b0}: {c0}吨',
    },
    legend: {
      data: ['风能装备', '核能装备', '海工装备', '调质钢', '传动装备', '耐磨介质', '核海新材料'],
      top:'5px',
      textStyle:{
        color:'#00fbea'
      }
    },
    grid: {
      left:'10px',
      top:'12%',
      right: '30px',
      bottom: '10px',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '24年1月', '24年2月', '24年3月'],
      axisLine:{
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel:  {
        interval: 0,
        // rotate:50,
        show: true,
        splitNumber: 15,
        textStyle: {
          color: "#ffffff",
          fontSize: '12',
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLine:{
        show: false,
      },
      axisLabel:{
        show: true,
        formatter: '{value}吨',
        splitNumber: 15,
        textStyle: {
          color: "#ffffff",
          fontSize: '12',
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        }
      }
    },
    series: [
      {
        name: '风能装备',
        type: 'line',
        //stack: 'Total',
        data: [520, 532, 501, 534, 590, 430, 610, 490, 530, 515, 330, 410]
      },
      {
        name: '核能装备',
        type: 'line',
        //stack: 'Total',
        data: [420, 482, 491, 434, 490, 430, 510, 492, 430, 410, 280, 388]
      },
      {
        name: '海工装备',
        type: 'line',
        //stack: 'Total',
        data: [450, 432, 401, 454, 490, 438, 480, 401, 454, 490, 220, 366]
      },
      {
        name: '调质钢',
        type: 'line',
        //stack: 'Total',
        data: [320, 332, 301, 354, 390, 330, 310, 301, 254, 290, 230, 310]
      },
      {
        name: '传动装备',
        type: 'line',
        //stack: 'Total',
        data: [350, 360, 333, 386, 301, 289, 360, 325, 263, 284, 240, 290]
      },
      {
        name: '耐磨介质',
        type: 'line',
        //stack: 'Total',
        data: [310, 312, 256, 321, 378, 356, 322, 311, 274, 289, 280, 320]
      },
      {
        name: '核海新材料',
        type: 'line',
        //stack: 'Total',
        data: [456, 442, 411, 434, 476, 458, 458, 421, 464, 498, 236, 288]
      }
    ]
  };
  chartInstance.setOption(option);
}

onMounted(()=>{
  createCharts();
})
</script>

<style lang="less" scoped>

</style>
